<template>
    <div class="wrapper">
        <swiper :options="swiperOption" >
        <!-- slides -->
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img :src="item.imgUrl" class="swiper-img"/>
        </swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
  </swiper>
    </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
  name: "HomeSwiper",
  // props: {
  //   swiperList: Array
  // },
  data() {
    return {
      swiperOption: {
        pagination: ".swiper-pagination",
        notNextTick:true,
        autoplay: true,
        speed: 2000,
        loop: true
      },
      components: {
        swiper,
        swiperSlide
      },
      swiperList: [
        {
          id: "0001",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1801/1a/94428c6dea109402.jpg_640x200_2cf590d8.jpg"
        },
        {
          id: "0002",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1802/42/7c92b9a381e46402.jpg_640x200_1cdce2a4.jpg"
        },
        {
          id: "0003",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1802/51/e78f936a5b404102.jpg_640x200_c14f0b3a.jpg"
        },
        {
          id: "0004",
          imgUrl:
            "http://img1.qunarzz.com/piao/fusion/1712/91/a275569091681d02.jpg_640x200_0519ccb9.jpg"
        }
      ]
    };
  }
  //   computed: {
  //     showSwiper() {
  //       return this.swiperList.length;
  //     }
  //   }
};
</script>
<style lang="scss" scoped>
.wrapper .swiper-pagination-bullet {
  background: #ffffff !important;
}
.wrapper {
  width: 100%;
  height: 0;
  padding-bottom: 31.25%;
  overflow: hidden;
  background: #eee;
}
.swiper-img {
  width: 100%;
}
</style>   
